
    *{padding: 0;margin:0;list-style: none;text-decoration: none; color:white;font-family: "Microsoft YaHei";}
@font-face { 
font-family: "Microsoft YaHei"; 

src: url(msyh.ttf); 
} 

	body{height: 100%;overflow: hidden;background:black;}
  .bg>div{width:100%;height: 100%;overflow: hidden;background-size:1920px;position:absolute;z-index: -4}
  .bg div:nth-child(1){background: url(../images/timg.jpg) no-repeat;z-index:-5;}
  .bg div:nth-child(2){background: url(../images/timg2.jpg) no-repeat;z-index:-6;}
  .bg div:nth-child(3){background: url(../images/timg3.jpg) no-repeat;z-index:-7;}

.sky{position: absolute;z-index:-3;width: 4500px;top:200px;}
.sky div {float: left;}
.sky div:nth-child(1){background:url(../images/cloud_one.png) no-repeat;width: 1500px;height: 500px;}
.sky div:nth-child(2){background:url(../images/cloud_three.png) no-repeat;width: 1500px;height: 500px;}
.sky div:nth-child(3){background:url(../images/cloud_two.png) no-repeat;width: 1500px;height: 500px;}


.main{position: absolute;transform-origin: left top 0px;transition:2s;transform-style: preserve-3d;transform: perspective(1300px) scale(1);top:50%;left:50%;margin-top:-300px;margin-left:-600px;}
.box{position: absolute;transition: all 1000ms ease-in-out 0ms;transform-style: preserve-3d;transform: rotateZ(0deg) rotateY(0deg) rotateX(0deg)translate3d(0px, 0px, 0px);transform-origin:600px 600px 600px; }
.box>div{position: absolute;}
.mine1{width: 1200px;height: 600px;background:url(../images/header-bg.jpg); background-size:1200px;transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(1) translate3d(0px,0px,0px) ;transition:1s;opacity: 1;border-radius: 20px;overflow: hidden;}
.mine2{width: 1200px;height: 600px;background:url(../images/slider-bg-3.jpg);background-size:1200px;transition:1s;transform:rotateX(0deg) rotateY(0deg) rotateZ(10deg) translate3d(1600px,-500px,-1200px) ;opacity: 0.5;border-radius: 20px;color: white;}
.mine3{width: 1200px;height: 600px;background:blue;transition:1s;transform:rotateX(0deg) rotateY(0deg) rotateZ(-10deg)  translate3d(-0px, -1000px, -3000px) ;opacity: 0.5;background:url(../images/home-bg.jpg);background-size:1200px;border-radius: 20px;}
.mine4{width: 1200px;height: 600px;background:black;transform:rotateX(0deg) rotateY(-180deg) rotateZ(0deg) translate3d(800px, -600px, -1800px);backface-visibility:hidden;opacity: 0.5;border-radius:20px;background:url(../images/key.jpg);background-size: 1200px;}
.mine5{width: 1200px;height: 600px;background:yellow;transition:2s;transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg)  translate3d(-800px, -600px, 1800px) ;backface-visibility:hidden;opacity: 0.5;background:url(../images/banner.jpg);background-size:1200px;border-radius: 20px;}
.nav{position: fixed;right: 0;top:300px;}
.nav>ul>li{width: 180px;border-radius: 5px;background:black;height: 50px;margin-top:5px;position: relative;left:130px;transition: 0.5s;cursor: pointer;}
.nav>ul>li:hover{left:0;}
.nav>ul>li a{display: inline-block;width:50px;height: 50px;margin-left:5px;}
.nav>ul>li:nth-child(1) a{background: url(../images/menu_sprite.png) 421px 7px; }
.nav>ul>li:nth-child(2) a{background: url(../images/menu_sprite.png) 266px 7px; }
.nav>ul>li:nth-child(3) a{background: url(../images/menu_sprite.png) 110px 5px; }
.nav>ul>li:nth-child(4) a{background: url(../images/menu_sprite.png) 189px -67px; }
.nav>ul>li:nth-child(5) a{background: url(../images/menu_sprite.png) 541px -67px; }



 .alt{width: 1200px;height: 600px;border-radius: 5px;position: absolute;background:rgba(0,0,0,0.6);top:0;z-index: -99}
.mine1 .mate{position:relative;}
.mine1 .mate h1{height:203px;margin: 50px auto;color: white;width:580px;background:url(../images/resume.png);}

.mine1 .mate .btn{border-radius: 15px;background-color:#0aecf4;display: block;width: 200px;height: 50px;line-height: 50px;text-align: center;font-size:26px;margin: 130px auto;color: white;border:3px solid #0aecf4;transition: 0.5s;}
.mine1 .mate .btn:hover{border:4px solid black;background: white;color: black;font-weight: bold;}
.mine1 .mate2{position:absolute;left:2000px;top:100px;transition:all 1500ms cubic-bezier(0.175, 0.885, 0.32, 1.275)}
.mine1 .mate2 h1{width: 200px;height: 200px;border-radius:50%;background:url(../images/touxiang.jpg) white no-repeat center center;background-size: 80%;margin-left: 500px;border:5px solid #1e243a;cursor: pointer;backface-visibility:hidden;backface-visibility:hidden;transform: rotateY(0deg);transition: 1s; }

.mine1 .mate2 .wechat{background: url(../images/WeChat1.jpg) no-repeat;width:200px;height:200px;background-size:100%;border-radius: 10px;margin-left:505px;margin-top:-205px;transform: rotateY(180deg);backface-visibility:hidden;transition: 1s;}

.mine1 .mate3{position: absolute;top:600px;background-color:#1e243a;width: 1200px;z-index: -1;height: 500px; padding-top: 0px;}
.mine1 .mate3 ul{float: left;margin-left: 330px;margin-top:150px;}
.mine1 .mate3 ul li:nth-child(1){color: #28d0b6;font-size: 24px;}
.mine1 .mate3 ul li{color: white;line-height: 30px;height: 30px;}
.mine2 h1{color: white;text-align: center;margin-top: 50px;width:200px;margin-bottom: 50px;margin-left: 50px;}

.mine2 ul{margin-left: 80px;}
.mine2 li p{height: 30px;line-height: 30px;}
.mine canvas{position: absolute;top:0;}
.mine3 p {width: 70%;margin:160px auto;color:white;background-color: rgba(0,0,0,0.8);border-radius: 10px;line-height: 30px;text-indent: 2em;}
.mine3  h1{text-align: center;color: white;margin-top: 50px;}
.mine4 h1{text-align: center;margin:40px auto;color:white;}
.mine4 ul{margin: 0px 500px;color: white}
.mine4 ul li{width: 100%;text-align: center;height: 30px;line-height: 30px;}
.mine5 h1 {margin:30px auto;color:white;width: 100%;text-align: center;}
.mine5 ul {width: 4800px;position:relative;}
.mine5 li{float: left;}
.mine5 ul li a{display: block;text-align: center;color: white;font-size: 20px;}

.mine5 ul li a img{width: 800px;height: auto;border-radius:5px;}
.mine5 .nav5 {width: 800px;overflow:hidden;margin-left: 200px;}
.mine5 .btn{width: 80px;height: 80px;border-radius: 50%;border:2px solid white;position: absolute;top:40%;cursor: pointer;}
.mine5 .btn_l{left:0;background: url(../images/btn.png) no-repeat 9px 11px;background-size: 160px;}
.mine5 .btn_l:hover{background-position:  9px -63px;border:3px solid orange; }
.mine5 .btn_r{right:0;background: url(../images/btn.png)no-repeat -90px 11px;background-size: 160px;}
.mine5 .btn_r:hover{background-position:-90px -63px;border:3px solid orange }


